<template>
  <div>
    <el-form :inline="true" :model="search" ref="search">
      <el-form-item label="关键词:" prop="keywords">
        <el-input v-model="search.keywords" style="width:250px" auto-complete placeholder="可输入主机名称,主机编号,IP,问题"></el-input>
      </el-form-item>
      <el-form-item label="严重性" prop="alarmSelectModel">
        <el-select v-model="search.alarmSelectModel" style="width:120px" :placeholder="$t('severity')">
          <el-option v-for="item in alarmLevelList" :label="item.label" :value="item.level" :key="item.level">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="timeRangeArr">
        <el-date-picker range-separator="-" v-model="search.timeRangeArr" type="daterange" placeholder="选择日期范围">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="searchClick">查询</el-button>
        <el-button @click="resetForm('search')">重置搜索</el-button>
      </el-form-item>
    </el-form>
    <v-table :options="alarmtable" @refreshActionHandle="refreshActionHandle"></v-table>
  </div>
</template>

<script>
import vTable from 'components/Table.vue'
import alarmApi from 'api/alarm'
import resType from 'common/resTypeEnum'
import { ALARM_SEVERITY } from 'common/resTypeEnum'
import DateUtils from 'utils/filters'
export default {
  components: {
    vTable
  },
  data() {
    return {
      search: {
        keywords: '',
        timeRange: '',
        timeRangeArr: '',
        alarmSelectModel: -1,
        timeFormatter: 'yyyy-MM-dd'
      },
      alarmtable: {
        data: [],
        columns: [
          //如果是多选 或者 有序号 添加这个
          {
            type: "selection",
            // width:'55',
            fixed: false
          },

          //所需要展示data 中的 数据 ，prop 绑定 data 中的属性值， label为表格中column 的header 值
          {
            prop: 'time',
            label: 'time',
            minWidth: '120',
            sortable: true
          },
          {
            prop: 'hostid',
            label: 'hostid',
            minWidth: '100'
          },
          {
            prop: 'hostname',
            label: 'hostname',
            minWidth: '100'
          },
          {
            prop: 'errorinfo',
            label: 'question',
            minWidth: '200'
          },
          {
            prop: 'clevel',
            label: 'severity',
            formatter: function(row, column) {
              const alarmLevel = resType.getAlarmSeverityLevel(row.clevel);
              row.style = alarmLevel.style;
              return alarmLevel.label;
            },
            minWidth: '100'
          }
        ],
        hasPagination: true,
        total: 0,
        exportExc: {
          hasPagination: true,
          headers: [],
          fileName: '日志管理',
          dataFunc: function() {
          },
          params: [],
          dataFunc2: function() {
          },
          params2: []
        },
      },
      alarmLevelList: [{
        level: -1,
        label: this.$t('All'),
        style: 'alarm_severity_not_classified'
      }].concat(ALARM_SEVERITY),
      pageIndex: 1,
      pageSize: 10
    };
  },
  methods: {
    refreshActionHandle(pageIndex, pageSize) {
      const self = this
      if (pageIndex && pageSize) {
        self.pageIndex = pageIndex
        self.pageSize = pageSize
      }
      self.searchClick();
    },
    getProblemPageQuery(pageNo, pageSize, params) {
      const self = this;
      alarmApi.getProblemPageQuery(pageNo, pageSize, params).then(response => {
        self.alarmtable.data = response.data.rows;
        self.alarmtable.total = response.data.total;
        self.alarmtable.pageIndex = response.data.pageIndex;
        self.alarmtable.pageSize = response.data.pageSize;
      }).catch((err) => {
        console.error(err);
      });
    },
    searchClick() {
      const self = this
      if (self.search.timeRangeArr.length > 0) {
        self.search.timeRange = DateUtils.formatDateDay(self.search.timeRangeArr[0]) + ',' + DateUtils.formatDateDay(self.search.timeRangeArr[1]);
      }
      let old = self.search.timeRangeArr;
      self.search.timeRangeArr = '';
      self.getProblemPageQuery(self.pageIndex, self.pageSize, this.search);
      self.search.timeRangeArr = old;
      self.changeExcelParams()
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.search.timeRange = '';
    },
    //导出excel时用的参数
    changeExcelParams() {
      let self = this;
      self.alarmtable.exportExc.hasPagination = true
      let header = []
      for (let item of self.alarmtable.columns) {
        if(item.prop){
          header.push({ name: self.$t(item.label), v: item.prop })
        }
      }
      self.alarmtable.exportExc.headers = header
      self.alarmtable.exportExc.fileName = '告警日志信息.xlsx'
      self.alarmtable.exportExc.dataFunc = alarmApi.getProblemPageAll
      self.alarmtable.exportExc.params = []
      self.alarmtable.exportExc.dataFunc2 = alarmApi.getProblemPageQuery
      self.alarmtable.exportExc.params2 = [self.pageIndex, self.pageSize, self.search]
    }
  },
  mounted() {
    this.searchClick()
  }
}
</script>
